<template>
	<view class="login-content">
		<view class="container">
			<view class="top-text"><text>Welcome</text></view>
			<!--登录信息-->
			<view class="login-form">
				<uni-forms :modelValue="formData" ref="ruleFormRef" :rules="rules">
					<uni-forms-item name="nickName">
						<input class="login-input" type="text" v-model="formData.nickName" placeholder="昵称" />
					</uni-forms-item>
					<uni-forms-item name="password">
						<input class="login-input" password type="text" v-model="formData.password" placeholder="密码" />
					</uni-forms-item>
					<uni-forms-item name="rePassword">
						<input class="login-input" password type="text" v-model="formData.rePassword" placeholder="确认密码" />
					</uni-forms-item>
					<uni-forms-item name="phone" v-if="isCheckCode">
						<view class="login-input-phone-item">
							<input class="login-input-phone" type="text" v-model="formData.phone" placeholder="手机号" />
							<button class="login-button-phone" @tap="getPhoneCode">获取验证码</button>
						</view>
					</uni-forms-item>
					<uni-forms-item name="checkCode" v-else>
						<view class="login-input-phone-item">
							<input class="login-input-phone" type="text" v-model="formData.checkCode" placeholder="验证码" />
							<button class="login-button-phone" @tap="reGetPhoneCode">{{ countDown > 0 ? countDown + "秒后重发" : "重新获取" }}</button>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="login-button">
					<button class="login" @tap="submitForm">去登录</button>
					<button class="register" @tap="registerForm">注册</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getCode, register } from '../../api/contacts';
import { isEmpty } from '../../util/common';

const formData = reactive({
	phone: "",
	nickName: "",
	password: "",
	rePassword: "",
	checkCode: "",
	checkCodeKey: ""

})
//校验
const ruleFormRef = ref(null)
const rules = reactive({
    phone: {
		rules: [{
			required: true,
			errorMessage: '请输入手机号'
		}]
	},
	nickName: {
		rules: [{
			required: true,
			errorMessage: '请输入昵称'
		}]
	},
	password: {
		rules: [{
			required: true,
			errorMessage: '请输入密码'
		}]
	},
    rePassword: {
		rules:[{
			required: true,
			errorMessage: '请再次输入密码'
		}]
	},
	checkCode: {
		rules:[{
			required: true,
			errorMessage: '请输入验证码'
		}]
	}
})

//注册
const registerForm = () => {
	if(!ruleFormRef.value) return;
	ruleFormRef.value.validate().then(async(result) => {
		//注册
		if(formData.password !== formData.rePassword){
			uni.showToast({
				title: '两次密码输入不一致',
				icon: 'none'
			});
			return;
		}		
		//获取checkCodeKey
		formData.checkCodeKey = uni.getStorageSync("checkCodeKey");
		let res = await register(formData)
		if(!isEmpty(res) && res.code == 0){
			uni.showToast({
				title: '注册成功',
				icon: 'none'
			});
			//跳转登录页面
			uni.redirectTo({
				url: '/pages/login/login'
			})
		}else{
			uni.showToast({
				title: '注册失败',
				icon: 'none'
			});
		}
	}).catch(err => {
		console.error("表单错误数据信息：", err)
	})
}
//获取手机验证码
const countDown = ref(60)
const isCheckCode = ref(true)
const getPhoneCode = async () => {
	if(!ruleFormRef.value) return;
	ruleFormRef.value.validate().then(async(result) => {
		//倒计时
		let timer = setInterval(() => {
			countDown.value--;
			if(countDown.value == 0){
				clearInterval(timer);
			}
		}, 1000)
		//获取手机验证码
		let res = await getCode(formData.phone)
		if(!isEmpty(res) && res.code === 0){
			console.log("获取成功", res)
			let message = "验证码已收到,请注意查收：" + res.result.checkCode;
			//将checkCodeKey保存到本地
			uni.setStorageSync("checkCodeKey", res.result.checkCodeKey);
			plus.push.createMessage( message);
			
		}
		isCheckCode.value = false
	}).catch(err => {
		console.error("表单错误数据信息：", err)
	})
}
//重新获取手机验证码
const reGetPhoneCode = () => {
	isCheckCode.value = true
	countDown.value = 60
}
//登录
const submitForm = () => {

	uni.redirectTo({
		url: '/pages/login/login'
	})
}
</script>

<style lang="scss" scoped>
.login-content{
	height: 100%;
	width: 100%;
	background-image: url("../../static/login/login.jpg");
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	.container{
		height: 60%;
		width: 80%;
		margin-top: 20rpx;
		.top-text{
			width: 100%;
			display: flex;
			justify-content: center;
			text{
				color: #fff;
				font-size: 90rpx;
				font-family: Georgia, serif;
			}
		}
		.login-form{
			margin-top: 80rpx;
			.login-input{
				border: 2px solid white;
				height: 90rpx;
				font-size: 30rpx;
				border-radius: 100rpx;
				text-align: center;
				color: #fff;
			}
			.login-input-phone-item{
				display: flex;	
				width: 100%;
				.login-input-phone{
					width: 60%;
					border: 2px solid white;
					height: 90rpx;
					font-size: 30rpx;
					border-radius: 100rpx 0 0 100rpx;
					text-align: center;
					color: #fff;
				}
				.login-button-phone{
					width: 40%;
					border: 2px solid white;
					height: 97rpx;
					font-size: 30rpx;
					line-height: 97rpx;
					border-radius: 0 100rpx 100rpx 0;
					text-align: center;
					//设置背景透明
					background-color: rgba(#94a6ad,0);
					color: #fff;
				}
			}
			
			.login-button{
				display: flex;
				.login{
					width: 50%;
					border-radius: 100rpx;
					background-color: rgba(#94a6ad,0.5);
					backdrop-filter: blur(4px);
					color: #fff;
					height: 90rpx;
					line-height: 90rpx;
					font-weight: bold;
					margin-right: 5rpx;
				}
				.register{
					width: 50%;
					color: #fff;
					border-radius: 100rpx;
					background-color: rgba(#94a6ad,0.5);
					backdrop-filter: blur(4px);
					height: 90rpx;
					line-height: 90rpx;
					font-weight: bold;
					margin-left: 5rpx;
				}
			}
		}
	}
}
</style>